<script>
import Taro from "@tarojs/taro";
import { reactive, watch } from "vue";
import { useTzRouter } from "@/vhooks/useTzRouter";
import { queryRocarsBundPageApi, deleteRocarsBundApi } from "../home/api";
import { getDicMap } from "@/utils/storage";
import TzVue, { useReachBottom, usePullDownRefresh } from "@/lib/TzVue";
import RecordList from "@/components/RecordList";
import { useRecordListConfig } from "../hooks/useRecordListConfig";
import { letgetDay } from "@/utils/date";

export default new TzVue({
  name: "bundleInquireRecord",
  components: {
    "record-list": RecordList,
  },
  setup() {
    const state = reactive({
      bundleList: [],
      currentPage: 1,
      queryForm: {},
    });

    usePullDownRefresh(() => {
      state.currentPage = 1;
      queryData({ ...state.queryForm, currentPage: 1 });
      Taro.stopPullDownRefresh();
    });

    useReachBottom(() => {
      const params = { ...state.queryForm, currentPage: ++state.currentPage };
      console.log(params);
      queryData(params, true);
    });

    const { navigateTo, route } = useTzRouter();

    // loading watcher
    watch(
      () => state.showLoading,
      (newVal) => {
        newVal
          ? Taro.showLoading({
              title: "加载中",
            })
          : Taro.hideLoading();
      }
    );

    // 查询确报数据
    const queryData = (params, isAppend) => {
      if (state.showLoading) return;
      state.showLoading = true;
      return new Promise((resolve, reject) => {
        queryRocarsBundPageApi(params)
          .then((res) => {
            state.showLoading = false;
            const { recordList, pageCount } = res.data;
            if (isAppend) {
              if (state.currentPage > pageCount) {
                Taro.showToast({
                  title: "已全部加载完成",
                  icon: "none",
                  duration: 2000,
                });
                // 把页数重置为上一页
                state.currentPage--;
                return;
              }
              state.bundleList.push(...recordList);
            } else {
              state.bundleList = recordList;
            }
            resolve();
          })
          .catch((err) => {
            state.showLoading = false;
            reject(err);
          });
      });
    };

    // 首次加载数据
    const params = { ...route.query, currentPage: 1 };
    // 保存请求数据
    state.queryForm = { ...route.query };
    queryData(params);

    const listItemClick = (data) => {
      navigateTo({
        path: "/pages/subHK/bundleInquire/details/index",
        query: {
          bundId: data.id,
        },
      });
    };

    const handleBtnClick = (data) => {
      const { id } = data.data;
      if (data.hanldeName === "delete") {
        Taro.showModal({
          content: "确定删除该条记录吗?",
          confirmText: "确定",
          cancelText: "取消",
        })
          .then((res) => {
            return res.confirm ? deleteRocarsBundApi(id) : Promise.reject();
          })
          .then(() => {
            state.currentPage = 1;
            queryData({ ...state.queryForm, currentPage: 1 });
          })
          .catch(() => {});
      } else if (["receipt", "receiptAndShot"].includes(data.hanldeName)) {
        navigateTo({
          path: "/pages/subHK/bundleInquire/receipt/index",
          query: {
            docId: id,
          },
        });
      }
    };

    const { passControlDic, billStatusDic } = getDicMap();
    const { handleData2Cell, cellRightDataConfig } = useRecordListConfig(
      passControlDic,
      billStatusDic
    );

    return () => {
      return (
        <tz-view class="bundle-inquire-record">
          <tz-view class="content">
            {state.bundleList.length ? (
              <record-list
                dataList={state.bundleList}
                onItemClick={listItemClick}
                onBtnClick={handleBtnClick}
                cellList={handleData2Cell}
                cellRightDataConfig={cellRightDataConfig}
              ></record-list>
            ) : (
              "暂无记录"
            )}
          </tz-view>
        </tz-view>
      );
    };
  },
});
</script>

<style lang="scss">
.bundle-inquire-record {
  .content {
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .record-list .data-list-item .info-area .tz-cell-label {
    width: 100px;
  }
}
</style>
